<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-if="showFilter('GiftManager')" label="礼品管理" name="GiftManager" />
      <el-tab-pane v-if="showFilter('DrawlotteyManager')" label="抽奖管理" name="DrawlotteyManager" />
      <div class="tab-content">
        <!-- <keep-alive> 组件name或者路由 -->
        <component :is="curTabcompnents[activeName]" />
        <!-- </keep-alive> -->
      </div>

    </el-tabs>
  </div>
</template>

<script>
import GiftManager from './components/giftmanager'
import DrawlotteyManager from './components/drawlotterymanager'
import { mapGetters } from 'vuex'
export default {
  name: 'Tab',
  components: { GiftManager, DrawlotteyManager },
  data() {
    return {
      activeName: '',
      curTabcompnents: {}
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    },
    fatherPower(v) {
      this.componentsHandle()
    }
  },
  computed: {
    ...mapGetters([
      'fatherPower'
    ])
  },
  created() {
    this.componentsHandle()
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    showFilter(str) {
      const data = Object.keys(this.curTabcompnents)
      if (data.indexOf(str) != -1) {
        return true
      } else {
        return false
      }
    },

    componentsHandle() {
      const idList = []

      for (let i = 0; i < this.fatherPower.length; i++) {
        if (this.fatherPower[i] == 18 || this.fatherPower[i] == 19) {
          idList.push(this.fatherPower[i])
        }
      }
      if (idList.length == 2) {
        this.curTabcompnents = {
          'GiftManager': 'GiftManager',
          'DrawlotteyManager': 'DrawlotteyManager'
        }
        this.activeName = 'GiftManager'
      } else {
        if (idList[0] == 18) {
          this.curTabcompnents = {
            'GiftManager': 'GiftManager'
          }
          this.activeName = 'GiftManager'
        } else {
          this.curTabcompnents = {
            'DrawlotteyManager': 'DrawlotteyManager'
          }
          this.activeName = 'DrawlotteyManager'
        }
      }
    },

    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  padding:0px;
}

</style>
